<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    /* 
纯函数: 
  函数的执行结果(返回值)只与参数有关, 且不改变外部数据(包括参数对象内部数据)
  多次调用, 传入相同的参数, 计算结果应该总是一样
  纯函数不带副作用
函数的副作用: 
  函数被调用，完成了函数既定的计算任务，但更新了外部数据
  不纯的函数就是带副作用的
有哪些常见的副作用
  更新全局变量
  数据存储
  修改参数对象内部数据
  更新页面DOM
  异步任务: ajax请求/定时器/订阅消
      
      
    */
    // 纯函数
    function sum(a, b) {
      const result = a + b

      return result
    }

    let x = 2
    let y = 4
    console.log(sum(x, y))
    console.log(sum(x, y))

    // 不纯的函数
    function fn1(obj) {
      obj.n = 3     // 修改了外部对象中的数据
    }

    const object = {n: 2}
    console.log(object.n)
    fn1(object)
    console.log(object.n)

    let name = 'tom'
    function fn2() { // 不纯的函数
      name += '+' // 修改了全局变量
      localStorage.setItem('msg_key', 'atguigu') // 向全局的浏览器存储中保存数据
      // 异步操作
      // 发请求
    }
    fn2()

    function test() {
      console.log(name)
      console.log(localStorage.getItem('msg_key'))
    }
    test()

    console.log(Math.random()) // random就是非纯函数
    console.log(Math.random())

    const arr = [1, 3, 5]
    arr.filter(element => {  // filter就是纯函数
      
    });

    arr.push(8) // 非纯函数

  </script>
</body>
</html>